import React, { Component } from 'react'
import {LiContainer} from './ListStyle'
import {withRouter} from 'react-router-dom'

@withRouter
export default class List extends Component {
    ListClickHandler=(id)=>{
        this.props.history.push(`/detail/${id}`)
    }
    render() {
        return (
            <>
                <LiContainer
                    width="0 0 1px 0"
                    color="#ccc"
                    onClick={()=>this.ListClickHandler(this.props.item.tid)}
                >
                    
                    <div className="newsBody">
                        <img className="left" src={this.props.item.smallImages[0]} alt="" />

                        <div className="right">
                            <h1>
                            {this.props.item.title}
                            </h1>
                            <p>
                            {this.props.item.intro}
                            </p>
                        </div>
                    </div>
                    <div className="newbottom">
                        <span className="time">
                            {this.props.item.createTime}
                        </span>
                        <div>
                            <span >
                                <i className="yo-ico browse">&#xe633;</i>
                                <b>{this.props.item.viewsCount}</b>
                            </span>
                            <span >
                                <i className="yo-ico common">&#xe664;</i>
                                <b>  {this.props.item.commentsCount}</b>
                            </span>
                            <span >
                                <i className="yo-ico like">&#xe603;</i>
                                <b> {this.props.item.commentsCount-2}</b>
                            </span>
                        </div>
                    </div>
                </LiContainer>
            </>
        )
    }
}
